{template 'web/hairsalon/base_menu'}
<script src="{MODULE_URL}template/resources/highcharts/highcharts.js"></script>
<script src="{MODULE_URL}template/resources/js/json.js"></script>
<div class="top_tab"> 
  <a href="{php echo $this->createWebUrl('salegoods')}" class="layui-btn {if $operation != 'display'}layui-btn-primary{/if}">产品统计</a> 
</div>
<style>
.panelbox-head a{ margin-right:10px}
.green{ color:#090}
.orange{ color:#F60}
.showbox{ margin-right:10px; background:#EEE; padding:10px 20px;}
.showbox2{margin-right:10px;}
.showbox h3{ font-size:12px; text-align:left; margin:20px 0 30px 0}
.showbox h3 b{ font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#F60}
h2{ font-size:18px; margin:10px;}
</style>
{if $operation == 'display'}
<div class="panelbox">
<form action="" method="post" class="layui-form" enctype="multipart/form-data">
  <div class="panelbox-head">
  	<a href="javascript:output(0)" class="layui-btn layui-btn-small"><i class="layui-icon">&#xe601;</i> 导出</a>
    <div class="layui-btn-group selecttime">
      <button type="button" class="layui-btn layui-btn-small">今天</button>
      <button type="button" class="layui-btn layui-btn-primary layui-btn-small">昨天</button>
      <button type="button" class="layui-btn layui-btn-primary layui-btn-small">近7天</button>
      <button type="button" class="layui-btn layui-btn-primary layui-btn-small">其他</button>
    </div>
    <span id="top_time" style="display:none">{php echo tpl_form_field_daterange('gametime', array('start' => date('Y-m-d H:i'),'end'=>date('Y-m-d H:i')),true)} <button type="button" onclick="getpage(1)" class="layui-btn layui-btn-danger layui-btn-small">查询</button></span>
    <input type="hidden" name="dateselect" value="1" />
  </div>
  <div class="panelbox-body">
  	<h2>产品销售统计</h2>
    <div class="row goodbox">
    	<div class="col-md-3">
        	<div class="showbox">
            	<p>销售笔数</p>
                <h3><b>0</b> 笔</h3>
            </div>
        </div>
        <div class="col-md-3">
        	<div class="showbox">
            	<p>商品数量</p>
                <h3><b>0</b> </h3>
            </div>
        </div>
        <div class="col-md-3">
        	<div class="showbox">
            	<p>销售金额</p>
                <h3>￥ <b>0</b> </h3>
            </div>
        </div>
        <div class="col-md-3">
        	<div class="showbox">
            	<p>销售单价</p>
                <h3>￥ <b>0</b> </h3>
            </div>
        </div>
    </div>
    
  </div>
  </form>
</div>
<div class="panelbox">
	<div class="panelbox-body">
    	<div class="row">
        	<div class="col-md-6">
                <div class="showbox2">
                    <div id="container1"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="showbox2">
                    <div id="container2"></div>
                </div>
            </div>
        </div>
    </div>
  </div>
<div class="panelbox">
    <div class="panelbox-body">
    	<div class="row">
        	<div class="col-md-6">
                <div class="showbox2">
                    <div id="container3"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="showbox2">
                    <div id="container4"></div>
                </div>
            </div>
        </div>
    </div>
    
</div>
<script language="javascript">
$(".selecttime button").on("click",function(){
	var val=$(this).index()+1;
	$("input[name='dateselect']").val(val);
	$(this).removeClass("layui-btn-primary").siblings().addClass("layui-btn-primary");
	if($(this).text()=="其他"){
		$("#top_time").show();
	}else{
		$("#top_time").hide();
		getpage(1);
	}
});
layui.use(['layer', 'laypage', 'element','form'], function(){
  var layer = layui.layer
  ,laypage = layui.laypage
  ,element = layui.element
  ,form = layui.form;
  getpage(1);

  form.on('submit(submitbtn)', function(data){
    
    return true;
  });
});
function getpage(){
	var index2=layer.load(1, {shade: [0.1,'#fff']});
	var searchdata={
		"datetype":$("input[name='dateselect']").val(),
		"statrtime":$("input[name='gametime[start]']").val(),	
		"endtime":$("input[name='gametime[end]']").val(),
	}
	$.post("{php echo $this->createWebUrl('salegoods',array('op'=>'getinfo'))}",searchdata,function(returnstr){
		layer.close(index2);
		console.log(returnstr);
		var result=eval("("+returnstr+")");
		if(result.success){
			var goodinfo=result.goodinfo;
			$(".goodbox h3").eq(0).find("b").text(result.num);
			$(".goodbox h3").eq(1).find("b").text(goodinfo.num2);
			$(".goodbox h3").eq(2).find("b").text(goodinfo.num1 ? fee2num(goodinfo.num1) : 0);
			$(".goodbox h3").eq(3).find("b").text(fee2num(parseInt(parseInt(goodinfo.num1)/parseInt(goodinfo.num2))));
			showPicture(result.goodinfo2,result.goodinfo3);
		}
	});
}
function output(obj){
    window.open("{php echo $this->createWebUrl('salegoods',array('op'=>'outputs'))}&datetype="+$("input[name='dateselect']").val()+"&statrtime="+$("input[name='gametime[start]']").val()+"&endtime="+$("input[name='gametime[end]']").val());
}
function showPicture(a,b){
	var goods=a;
	var goods2=b;
	if(goods){
		var atitle=[];
		var series=[];
		var series2=[];
		for(var i in goods){
			if(goods[i].goodid=='0'){
				atitle.push('无条码');
			}else{
				atitle.push(goods[i].title);
			}
			series.push(parseInt(goods[i].num2));
			series2.push(parseInt(goods[i].num1)*0.01);
		}
		$('#container1').highcharts({
			chart: {
				type: 'column'
			},
			title: {
				text:'商品销售量TOP10'
			},
			subtitle:null,
			xAxis: {
				categories: atitle,
				crosshair: true
			},
			yAxis: {
				min: 0,
				title: {
					text: '销售量 (份)'
				}
			},
			tooltip: {
				pointFormat: '{series.name}:<b>{point.y:.1f} 份</b>',
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
			series: [{
				name: '销量',
				data: series
			}]
		});
		
		$('#container2').highcharts({
			chart: {
				type: 'column'
			},
			title: {
				text:'商品销售金额TOP10'
			},
			subtitle:null,
			xAxis: {
				categories:atitle,
				crosshair: true
			},
			yAxis: {
				min: 0,
				title: {
					text: '金额 (元)'
				}
			},
			tooltip: {
				pointFormat: '{series.name}:<b>{point.y:.1f} 元</b>',
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
			series: [{
				name: '金额',
				data: series2
			}]
		});
	}
	if(goods2){
		var goodlist=eval("("+'{php echo json_encode($goodary)}'+")");
		var series=[];
		var series2=[];
		for(var i in goods2){
			var temp=[goodlist[goods2[i].pcate],parseInt(goods2[i].num2)];
			series.push(temp);
			var temp2=[goodlist[goods2[i].pcate],parseInt(goods2[i].num1)];
			series2.push(temp2);
		}
		$('#container3').highcharts({
			chart: {
				plotBackgroundColor: null,
				plotBorderWidth: null,
				plotShadow: false
			},
			title: {
				text: '类别销量比例'
			},
			tooltip: {
				headerFormat: '{series.name}<br>',
				pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
			},
			plotOptions: {
				pie: {
					allowPointSelect: true,
					cursor: 'pointer',
					dataLabels: {
						enabled: true,
						format: '<b>{point.name}</b>: {point.percentage:.1f} %',
						style: {
							color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
						}
					}
				}
			},
			series: [{
				type: 'pie',
				name: '类别销量比例',
				data: series
			}]
		});
		$('#container4').highcharts({
			chart: {
				plotBackgroundColor: null,
				plotBorderWidth: null,
				plotShadow: false
			},
			title: {
				text: '类别销售额比例'
			},
			tooltip: {
				headerFormat: '{series.name}<br>',
				pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
			},
			plotOptions: {
				pie: {
					allowPointSelect: true,
					cursor: 'pointer',
					dataLabels: {
						enabled: true,
						format: '<b>{point.name}</b>: {point.percentage:.1f} %',
						style: {
							color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
						}
					}
				}
			},
			series: [{
				type: 'pie',
				name: '类别销售额比例',
				data: series2
			}]
		});
	}
}
</script>

{/if}